<template>
    <navigation :path="path" @path-to="pathTo">
        <li v-if="showMkdir" class="breadcrumb-item">
            <input type="text" style="height: 20px;width: 80px;border: none;" v-model="newPath">
            <a class="ml-2" style="cursor: pointer;font-size: 1em;" @click="mkdir"><i class="fa fa-check-circle-o" aria-hidden="true"></i></a>
            <a class="ml-2" style="cursor: pointer;font-size: 1em;" @click="showMkdir=false;newPath=''"><i class="fa fa-close" aria-hidden="true"></i></a>
        </li>
        <div class="d-sm-block d-none" style="position:absolute;right:50px">
            <a class="ml-2" href="mkdir" @click.prevent="showMkdir=true">新建目录</a>
            <a class="ml-2" href="edit" @click.prevent="$emit('newOne', path)">新建</a>
        </div>
    </navigation>
</template>

<script>
export default {
    data() {
            return {
                showMkdir: false,
                newPath: '',
            }
        },
    components: {
        'navigation': component('/static/navigation.vue'),
    },
    props: ['path'],
    emits: ['pathTo', 'mkdir', 'newOne'],
    methods: {
        pathTo(path) {
            this.$emit('pathTo', path)
        },
        mkdir() {
            let path = (this.path.endsWith('/') ? this.path : this.path + '/') + this.newPath
            this.$emit('mkdir', path)
            this.showMkdir = false
        }
    },
    watch: {
    },
    computed: {
        paths() {
            return this.path && this.path !== '/' ? this.path.slice(1).split('/') : []
        }
    },
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>
